<template>
  <div class="customer-config">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="secondNav">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabs">
      </el-tab-pane>
    </el-tabs>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
  import {isHasMenu} from '@/utils/m7Utils'
  export default {
    name: 'CustomerConfig',
    data () {
      return {
        activeName: 'modal',
        customerData: {},
        tabs: [
          {name: 'modal', label: this.$t('config.customer.customerTempl'), id: 'customer_status'},
          {name: 'import', label: this.$t('config.customer.customerImport'), id: 'customer_import'}
        ]
      }
    },
    methods: {
      handleClick (tab) {
        this.$router.push({path: '/index/config/customerConfig/' + tab.name})
      }
    },
    beforeRouteLeave (to, from, next) {
      this.currentRoute = from.fullPath
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.query.active) {
        } else if (vm.currentRoute) {
          vm.$router.push({path: vm.currentRoute})
        }
      })
    },
    beforeMount () {
      this.tabs = this.tabs.filter((item) => {
        if (isHasMenu(item.id, this.$store.state.session.user)) {
          return true
        }
      })
      this.activeName = this.tabs[0].name
      this.handleClick(this.tabs[0])
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
</style>
